<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="/static/images/favicon.ico">
		<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
		<style id="layuimini-bg-color">
			div.layui-col-sm2 div img {
				height: 200px;
				width: 200px;
				transition: all 0.5s;
			}

			div.layui-col-sm2 div img:hover {
				transform: scale(0.9);
			}
		</style>
	</head>
	<body>
		<div class="layui-fluid"
			style="background-color: cyan;height: 300px;background-image: url(/static/images/loginbg.png);">
			<div class="layui-row">
				<div class="layui-col-sm6">
					<div class="grid-demo">
						<ul id="menu" class="layui-nav" lay-filter="menu" style="background-color:transparent;">
							<li class="layui-nav-item" value="0"><a href="/">首页</a></li>
						</ul>
					</div>
				</div>
				<div class="layui-col-sm6">
					<div class="grid-demo">
						<ul id="not_login" class="layui-nav"
							style="background-color:transparent;float: right;display:block">
							<!-- <li class="layui-nav-item">
								<a href="">vip</a>
							</li> -->
							<li class="layui-nav-item">
								<a href="/login.html">登录</a>
							</li>
							<li class="layui-nav-item">
								<span>|</span>
							</li>
							<li class="layui-nav-item">
								<a href="/register.html">注册</a>
							</li>
						</ul>
						<ul id="login" class="layui-nav" style="background-color:transparent;float: right;display:none">
							<li class="layui-nav-item">
								<a id="vip" href="/web_profile.html?value=2"></a>
							</li>
							<li class="layui-nav-item">
								<a id="user_name" href="/web_profile.html?value=1"></a>
								<dl class="layui-nav-child">
									<dd>
										<a href="/web_profile.html?value=1"
											layuimini-content-href="page/user-setting.html" data-title="基本资料"
											data-icon="fa fa-gears">基本资料<span class="layui-badge-dot"></span></a>
									</dd>
									<dd>
										<a href="/web_profile.html?value=4"
											layuimini-content-href="page/user-password.html" data-title="修改密码"
											data-icon="fa fa-gears">修改密码</a>
									</dd>
									<dd>
										<hr>
									</dd>
									<dd>
										<a href="javascript:;" class="login_out">退出登录</a>
									</dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="layui-row">
				<br /><br /><br /><br /><br />
				<div class="layui-col-md4 layui-col-md-offset4">
					<input type="text" placeholder="输入标题关键字" id="search_title" class="layui-input">
				</div>
				<div class="layui-col-md4">
					<button type="button" id="search_btn" class="layui-btn">搜索</button>
				</div>

			</div>

		</div>

		<div class="layui-container" style="margin: 30px auto; float: none;width: 90%;height: 100%;">
			<fieldset class="layui-elem-field layui-field-title" style="margin: 40px auto;width: 90%;height: 100%;">
				<legend style="margin: auto; ">最新发布<i>NEW</i></legend>
			</fieldset>
			<div class="layui-row layui-col-space25" style="margin: 0 auto; float: none;width: 90%;height: 100%;">

				<ul class="flow-default" style="height: 100%;width: 100%;" id="LAY_demo2">

				</ul>

			</div>
		</div>
		<script src="/static/lib/layui-v2.6.3/layui.js"></script>

		<script>
			function getCookie(name) {
				var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
				return r ? r[1] : undefined;
			}


			layui.use(['form', 'layedit', 'laydate', 'flow', 'element'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate,
					flow = layui.flow,
					element = layui.element,
					$ = layui.jquery;

				var avatar_img = "";
				//检查登录状态
				$.ajax({
					type: "post", //get或者post
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					url: '/api/v1.0/check_login',
					data: {}, //参数 接口传参 json对象
					success: function(res) {
						// console.log(res);
						if ("0" == res.code) {
							if (res.data.user_id == "1") {
								location.href = "/index.html"
							} else {
								// location.href = "/web_index.html"
								avatar_img = res["data"]["avatar"]
								is_vip = res["data"]["is_vip"]
								console.log(res["data"]["avatar"]);
								console.log(res["data"]["is_vip"]);
								var not_login = document.getElementById('not_login');
								not_login.style.display = 'none'
								var login = document.getElementById('login');
								login.style.display = 'block'
								var a = document.getElementById('user_name'); //获取a元素对象
								if (avatar_img == "") {
									a.innerHTML = '<img src="' + '//t.cn/RCzsdCq' +
										'" class="layui-nav-img">' +
										res.data.user_name;
								} else {
									a.innerHTML = '<img src="' + avatar_img +
										'" class="layui-nav-img">' +
										res.data.user_name;
								}
								var avip = document.getElementById('vip'); //获取a元素对象
								if (is_vip == 1) {
									avip.innerHTML = '<img src="/static/images/vipicon-5.png"/>';

								} else {
									avip.innerHTML = 'vip';
								}
							}

						} else {
							$(".not_login").show();
						}
					}
				});

				function addli_dl(key, value) {
					var li = document.createElement("li")
					li.className = "layui-nav-item"
					li.value = key
					li.innerHTML = '<a href="/web_courselist.html?contents=' + key + '">' + value + '</a>'
					document.getElementById("menu").appendChild(li)
					return li
				}


				//获取所有menu菜单
				$.ajax({
					type: "post", //get或者post
					contentType: 'application/json',
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					url: '/api/v1.0/get_contents_all_list',
					data: {}, //参数 接口传参 json对象
					success: function(res) {
						$("#menu").find('span.layui-nav-bar').remove();
						var li;
						var dl = document.createElement("dl");
						dl.className = "layui-nav-child";

						$.each(res.data, function(index, value) {
							if (value.contents_level == "0") {
								li = addli_dl(value.contents_id, value.contents_name)
							}
							if (value.contents_level != "0") {

								$.each(res.data, function(index, valueparent) {
									// console.log(valueparent.contents_level)
									if (value.contents_level == valueparent.contents_id) {
										var dd = document.createElement("dd")
										dd.value = valueparent.contents_id
										dd.innerHTML =
											'<a href="/web_courselist.html?contents=' + value
											.contents_id + '">' + value.contents_name +
											'</a>'
										dl.appendChild(dd)
									}
									li.appendChild(dl)
								})
							}
						});
						element.render('ul');
						element.render('dl');
					}
				});


				// 获取所有课程信息列表
				var course_list;

				//获取所有标签信息列表
				var label_list;
				$.ajax({
					type: "post", //get或者post
					contentType: 'application/json',
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					url: '/api/v1.0/get_labels_all_list',
					data: {}, //参数 接口传参 json对象
					success: function(res) {
						label_list = res.data
					}
				});

				var course_data = {
					"curr": "",
					"nums": "",
					"searchParams": {
						"course_id": "",
						"course_title": "",
						"label_id": "",
						"contents_id": ""
					}
				}


				flow.load({
					elem: '#LAY_demo2' //流加载容器
						,
					// scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。
					// 	,
					isAuto: false,
					isLazyimg: true,
					done: function(page, next) { //加载下一页
						course_data.curr = page
						course_data.nums = 8
						var lis = [];
						$.ajax({
							type: "post", //get或者post
							contentType: 'application/json',
							headers: {
								'X-CSRFToken': getCookie('csrf_token')
							},
							url: '/api/v1.0/course_list',
							data: JSON.stringify(course_data), //参数 接口传参 json对象
							success: function(res) {
								course_list = res.data
								// console.log("course_list1:" + course_list)

								$.each(label_list, function(label_index, label_value) {
									// console.log(label_value)
									$.each(course_list, function(course_index,
										course_value) {
										// console.log(course_value)
										if (label_value['label_id'] ==
											course_value['label_id']) {
											course_value["label_name"] =
												label_value['label_name']
										}
									});
								});
								// console.log("course_list2:" + course_list)
								//假设你的列表返回在data集合中
								layui.each(course_list, function(index, item) {
									lis.push(
										'<div class="layui-col-sm2" style="padding: 10px;"><div class="grid-demo grid-demo-bg1" align="center">' +
										'<a href="/web_coursedetail.html?couser_id=' +
										item["course_id"] +
										'"><img alt="" src="' +
										item["index_image_url"] +
										'"></a>' +
										'</div><div style="text-align:left"><div style="border-top:10px solid transparent;border-bottom:10px solid transparent">' +
										'<span><span class="layui-badge-dot layui-bg-orange"></span><a href="/web_coursedetail.html?couser_id=' +
										item["course_id"] +
										'"> ' +
										item["label_name"] +
										'</a></span>' +
										'</div><div style="border-bottom:10px solid transparent"><a href="/web_coursedetail.html?couser_id=' +
										item["course_id"] +
										'">' +
										'<span style="display: -webkit-box; -webkit-box-orient: vertical; /* 设置对齐模式 */ -webkit-line-clamp:1; /* 设置显示行数 */ overflow: hidden; text-overflow:' +
										'ellipsis;">' + item["title"] +
										'</span></a>' +
										'</div>' +
										'<div style="border-bottom:10px solid transparent"><span style="color: #c0c0c0;"><i class="layui-icon layui-icon-time"></i> ' +
										item["create_time"] + '</span>' +
										'<span style="color: #c0c0c0;right: 10%;position: absolute"><i class="layui-icon layui-icon-diamond"></i> ' +
										item["normal_price"] +
										'</span></div></div></div>'
									);
								});


								//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
								//count为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
								next(lis.join(''), page < res.count);
							}
						});


					}
				});




				$('#search_btn').on("click", function() {
					document.getElementById("LAY_demo2").innerHTML = "";
					var input_title = document.getElementById("search_title")
					var title = input_title.value
					console.log(title)
					course_data.searchParams.course_title = title
					flow.load({
						elem: '#LAY_demo2', //流加载容器
						isAuto: false,
						isLazyimg: true,
						done: function(page, next) { //加载下一页
							course_data.curr = page
							course_data.nums = 8
							var lis = [];
							$.ajax({
								type: "post", //get或者post
								contentType: 'application/json',
								headers: {
									'X-CSRFToken': getCookie('csrf_token')
								},
								url: '/api/v1.0/course_list',
								data: JSON.stringify(course_data), //参数 接口传参 json对象
								success: function(res) {
									course_list = res.data
									// console.log("course_list1:" + course_list)

									$.each(label_list, function(label_index,
										label_value) {
										// console.log(label_value)
										$.each(course_list, function(
											course_index,
											course_value) {
											// console.log(course_value)
											if (label_value[
													'label_id'] ==
												course_value['label_id']
											) {
												course_value[
														"label_name"] =
													label_value[
														'label_name']
											}
										});
									});
									// console.log("course_list2:" + course_list)
									//假设你的列表返回在data集合中
									layui.each(course_list, function(index, item) {
										lis.push(
											'<div class="layui-col-sm2" style="padding: 10px;"><div class="grid-demo grid-demo-bg1" align="center">' +
											'<a href="/web_coursedetail.html?couser_id=' +
											item["course_id"] +
											'"><img alt="" src="' +
											item["index_image_url"] +
											'"></a>' +
											'</div><div style="text-align:left"><div style="border-top:10px solid transparent;border-bottom:10px solid transparent">' +
											'<span><span class="layui-badge-dot layui-bg-orange"></span><a href="/web_coursedetail.html?couser_id=' +
											item["course_id"] +
											'"> ' +
											item["label_name"] +
											'</a></span>' +
											'</div><div style="border-bottom:10px solid transparent"><a href="/web_coursedetail.html?couser_id=' +
											item["course_id"] +
											'">' +
											'<span style="display: -webkit-box; -webkit-box-orient: vertical; /* 设置对齐模式 */ -webkit-line-clamp:1; /* 设置显示行数 */ overflow: hidden; text-overflow:' +
											'ellipsis;">' + item["title"] +
											'</span></a>' +
											'</div>' +
											'<div style="border-bottom:10px solid transparent"><span style="color: #c0c0c0;"><i class="layui-icon layui-icon-time"></i> ' +
											item["create_time"] + '</span>' +
											'<span style="color: #c0c0c0;right: 10%;position: absolute"><i class="layui-icon layui-icon-diamond"></i> ' +
											item["normal_price"] +
											'</span></div></div></div>'
										);
									});

									//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
									//count为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
									next(lis.join(''), page < res.count);
								}
							});


						}
					});

				});

				$('.login_out').on("click", function() {
					$.ajax({
						type: "post", //get或者post
						headers: {
							'X-CSRFToken': getCookie('csrf_token')
						},
						url: '/api/v1.0/logout',
						data: {}, //参数 接口传参 json对象
						success: function(res) {
							if (res.code == "0") {
								layer.msg('退出登录成功', function() {
									// window.location = '/login.html';
									// location.href = "/login.html"
									// location.href = "/web_index.html"
									window.location.reload()
								});
							} else {
								layer.msg('退出失败')
							}
						}
					});
				});

			})
		</script>

	</body>
</html>
